<!DOCTYPE html>
<html>
	<head>
		<!-- 为机器提供信息的 -->
		<meta charset="utf-8">
		<title>CSS图书封面案例</title>
		<style type="text/css">
			html,body{
				margin: 0px;
				padding: 0px;
				height:  100%;
				width: 100%;
			}
			body{
				display: flex;
			}
			.one{
				width: 100px;
				/* flex  width 属性失效 */
				height: 100px;
				background-color: pink;
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		  <div class="one" style="flex: 1 0 100px;">1</div>
		  <div class="one" style="flex: 1 0 100px;">2</div>
		  <div class="one" style="flex: 0 1 100px;">3</div>
		  <div class="one" style="flex: 1 0 100px;">4</div>
			<!--  
				wc     w1,w2,w3,w4    
				wc = w1+w2+w3+w4   不存在缩放问题 ，安装 w1 ...w4  按各自指定值进行分配
				
				wc >  w1+w2+w3+w4 
				
				
				ws =  wc - w14
				首先保证各自的需要， 按各自指定值进行分配，，各自按放大比例切分ws
				700 - 400 = 300 
				
				ws < w14
				
				首先保证各自的需要， 按各自指定收缩值进行回收，，各自按放大比例切分ws
				
				-->
	</body>
</html>
